<template>
  <van-popup class="f-date-popup" v-model:show="datePopup" closeable position="bottom" close-icon-position="top-left">
    <van-tabs v-model:active="popupTabs">
      <van-tab title="按月" v-if="type == 'month' || type == 'all'">
        <van-date-picker v-model="dateForm.currentDate" title="选择日期" :columns-type="['year', 'month']">
          <template #toolbar></template>
        </van-date-picker>
        <div class="f-popup-btn">
          <van-button block type="primary" @click="selectDate(1)">确定</van-button>
        </div>
      </van-tab>
      <van-tab title="时间段" v-if="type == 'time' || type == 'all'">
        <ul class="f-date-tag">
          <li :class="{'f-date-active-btn': activeBtn == '1'}" @click="setDate(1)">近1月</li>
          <li :class="{'f-date-active-btn': activeBtn == '2'}" @click="setDate(2)">近3月</li>
          <li :class="{'f-date-active-btn': activeBtn == '3'}" @click="setDate(3)">近6月</li>
          <li :class="{'f-date-active-btn': activeBtn == '4'}" @click="setDate(4)">近1年</li>
        </ul>
        <div class="f-date-scope">
          <p class="f-date-start" :class="{'f-date-active': dateForm.showDateType == 'start'}" @click="clickDate('start')">
            {{dateForm.startStr || '选择开始时间'}}</p>
          <p class="f-date-line"></p>
          <p class="f-date-end" :class="{'f-date-active': dateForm.showDateType == 'end'}" @click="clickDate('end')">
            {{dateForm.endStr || '选择结束时间'}}</p>
        </div>
        <van-date-picker v-if="dateForm.showDateType == 'start'" v-model="dateForm.start" visible-option-num="3"
          @change="changeDateStart">
          <template #toolbar></template>
        </van-date-picker>
        <van-date-picker v-if="dateForm.showDateType == 'end'" v-model="dateForm.end" visible-option-num="3"
          @change="changeDateEnd">
          <template #toolbar></template>
        </van-date-picker>
        <div class="f-popup-btn">
          <van-button block type="primary" @click="selectDate(2)">确定</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </van-popup>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { initDatepicker, getDateTime, warningDeal } from '@/utils/utils';
export default {
  emits: ["selectDate"],

  props: {
    type: {
      type: String,
      default: 'all'
    }
  },
  setup(props, context) {

    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      datePopup: false,
      popupTabs: props.type == 'all' ? 0 : props.type == 'month' ? 0 : 1,
      activeBtn: 0,
      dateForm: {
        showDateType: "",
      }
    })

    onMounted(() => {
      let currentDateStr = getDateTime(initDatepicker(3))[3]
      state.dateForm.currentDateStr = currentDateStr
      state.dateForm.currentDate = currentDateStr.split("-")

      if (props.type == 'time') {
        setDate(2)
      }
    })

    const selectDate = (e) => {
      if (e == 2) {
        if (!state.dateForm.start) {
          warningDeal('请选择开始时间')
          return
        }
        if (!state.dateForm.end) {
          warningDeal('请选择结束时间')
          return
        }
      }
      state.datePopup = false
      let json = JSON.parse(JSON.stringify(state.dateForm))
      json.currentDateStr = json.currentDate.join('-')
      json.popupTabs = state.popupTabs
      context.emit('selectDate', json)
    }

    const clickDate = (type) => {
      state.dateForm.showDateType = type
    }

    const changeDateStart = (e) => {
      state.activeBtn = 0
      state.dateForm.startStr = e.selectedValues.join('-')
    }

    const changeDateEnd = (e) => {
      state.activeBtn = 0
      state.dateForm.endStr = e.selectedValues.join('-')
    }

    const setDate = (type) => {
      let end = getDateTime(initDatepicker(3))[8]
      if (type == 1) {
        let start = getDateTime(initDatepicker(3) - 30 * 24 * 60 * 60 * 1000)[8];
        state.dateForm.startStr = start
        state.dateForm.endStr = end
        state.dateForm.start = start.split("-")
        state.dateForm.end = end.split("-")
      }
      if (type == 2) {
        let start = getDateTime(initDatepicker(3) - 3 * 30 * 24 * 60 * 60 * 1000)[8];
        state.dateForm.startStr = start
        state.dateForm.endStr = end
        state.dateForm.start = start.split("-")
        state.dateForm.end = end.split("-")
      }
      if (type == 3) {
        let start = getDateTime(initDatepicker(3) - 6 * 30 * 24 * 60 * 60 * 1000)[8];
        state.dateForm.startStr = start
        state.dateForm.endStr = end
        state.dateForm.start = start.split("-")
        state.dateForm.end = end.split("-")
      }
      if (type == 4) {
        let start = getDateTime(initDatepicker(3) - 365 * 24 * 60 * 60 * 1000)[8];
        state.dateForm.startStr = start
        state.dateForm.endStr = end
        state.dateForm.start = start.split("-")
        state.dateForm.end = end.split("-")
      }
      state.activeBtn = type
    }

    return {
      ...toRefs(state),
      selectDate,
      clickDate,
      changeDateStart,
      changeDateEnd,
      setDate
    }
  }
}
</script>
<style lang='scss' scoped>
.f-date-popup {
  .f-popup-btn {
    margin: 105px 0 20px 0;
    padding: 0 30px;
  }
  .f-date-tag {
    display: flex;
    justify-content: space-between;
    margin: 15px 30px;
    li {
      background: #f3f3f3;
      border: 1px solid #a9a9a9;
      border-radius: 3px;
      padding: 5px 15px;
      font-size: 13px;
    }
  }
  .f-date-active-btn {
    background: #3273f3 !important;
    border: 1px solid #3273f3 !important;
    color: #fff;
  }
  .f-date-scope {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 30px;
    margin-top: 20px;
    font-size: 13px;
    .f-date-start {
      border: 1px solid #a9a9a9;
      color: #a9a9a9;
      border-radius: 3px;
      padding: 5px;
      width: 150px;
      text-align: center;
    }
    .f-date-line {
      width: 23px;
      height: 2px;
      background: #a9a9a9;
      margin: 0 20px;
    }
    .f-date-end {
      border: 1px solid #a9a9a9;
      color: #a9a9a9;
      border-radius: 3px;
      padding: 5px;
      width: 150px;
      text-align: center;
    }
    .f-date-active {
      border: 1px solid #3273f3;
    }
  }
}
</style>


<style lang='scss'>
.f-date-popup {
  .van-tabs__wrap {
    margin-top: 6px;
    border-bottom: 1px solid #ababab;
    padding: 0 87.5px;
  }
  .van-picker__toolbar {
    height: 10px;
  }
}
</style>